<template>
	<view class="paymentSuccessful">
		<view class="paymentSuccessful_header">
			<view @click="backReturn" class="paymentSuccessful_header_left">
				<image src="../../../static/home/search_left.png"></image>
			</view>
			<view class="paymentSuccessful_header_text">
				付款成功
			</view>
		</view>
		<view class="paymentSuccessful_img">
			<image src="../../../static/home/success.png" mode="widthFix"></image>
		</view>
		<view class="paymentSuccessful_text">
			恭喜，您已成功支付！
		</view>
		<view class="paymentSuccessful_ButtonBox">
			<view class="paymentSuccessful_ButtonBox_button">
				<view @click="older" class="paymentSuccessful_Button">
					查看订单
				</view>
			</view>
			<view class="paymentSuccessful_ButtonBox_button">
				<view @click="homeLink" class="paymentSuccessful_Buttont">
					返回首页
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			backReturn() {
				uni.navigateBack({
					// animationType: 'slide-out-right',
				});
			},
			homeLink() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			older() {
				uni.redirectTo({
					url: '/pages/mine/OrderList?act=0'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.paymentSuccessful {
		.paymentSuccessful_header {

			background: linear-gradient(108deg, #F3C01C 0%, #FED85E 100%);
			display: flex;
			align-items: center;
			position: relative;
			justify-content: center;
			padding: 22upx 0;
			padding-top: calc(22upx + var(--status-bar-height));

			.paymentSuccessful_header_left {
				position: absolute;
				left: 0;
				top: calc(50% + (var(--status-bar-height) / 2));
				transform: translateY(-50%);
				// margin-top: var(--status-bar-height);
				padding: 0 32upx;

				image {
					width: 16upx;
					height: 28upx;
				}
			}
		}

		.paymentSuccessful_img {
			margin-top: 126upx;
			display: flex;
			justify-content: center;

			image {
				width: 406upx;
			}
		}

		.paymentSuccessful_text {
			font-size: 32upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #E9DA57;
			text-align: center;
			line-height: 44upx;
			margin-top: 98upx;
		}

		.paymentSuccessful_ButtonBox {
			margin-top: 174upx;

			.paymentSuccessful_ButtonBox_button {
				display: flex;
				align-items: center;
				justify-content: center;

				.paymentSuccessful_Button {
					width: 386upx;
					height: 104upx;
					background: #D8D8D8;
					border-radius: 52upx;
					align-items: center;
					display: flex;
					justify-content: center;
					font-size: 32upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.5);
					line-height: 44upx;
				}


				.paymentSuccessful_Buttont {
					width: 386upx;
					height: 100upx;
					background: linear-gradient(137deg, #FCD659 0%, #F3C11E 100%);
					border-radius: 50upx;
					align-items: center;
					display: flex;
					justify-content: center;
					font-size: 32upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 44upx;
					margin-top: 42upx;
				}
			}
		}
	}
</style>
